<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="订单标题" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入订单标题"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入手机号码"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="订单状态"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="(dict, index) in statusOptions"
                :key="index"
                :label="dict"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" v-if="false">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置/查看全部</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              disabled
              @click="handleDelete"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData.list" border style="width: 100%"  v-loading="loading">
        <el-table-column
          fixed
          prop="orderNum"
          label="订单Id"
          width="150"
        ></el-table-column>
        <el-table-column prop="name" label="详情" width="400">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="8">
                <el-image :src="scope.row.img"> </el-image>
              </el-col>
              <el-col :span="16">
                <div style="margin-left: 12px">
                  标题：{{ scope.row.title }} <br />
                  带货方式：{{ scope.row.model }} <br />
                  店铺：{{ scope.row.shopName }} <br />
                  佣金：{{ scope.row.salary }}
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag size="medium">{{ statusOptions[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="达人作业提交" width="150">
          <template slot-scope="scope">
            {{scope.row.workContent}}
          </template>
        </el-table-column>
        <el-table-column label="达人信息" width="200">
          <template slot-scope="scope">
            账号列表：{{ scope.row.accountName }} <br />
            微信：{{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="100"
        ></el-table-column>
        <el-table-column label="地址信息" width="200">
          <template slot-scope="scope">
            地址：{{ scope.row.characteristic }} <br />
            手机号：{{ scope.row.phone }} <br />
            收货人姓名：{{ scope.row.wechat }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="opt(scope.row, 1)"
              type="text"
              size="small"
              v-if="scope.row.status == 0"
              >同意</el-button
            >
            <el-button
              @click="opt(scope.row, 4)"
              type="text"
              size="small"
              v-if="scope.row.status == 0"
              >拒绝</el-button
            >
            <el-button
              @click="preSend(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.status == 1"
              >发货</el-button
            >
            <el-dialog
              title="提示"
              :modal="false"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <el-input
                v-model="goodsLogistics.logisticsNum"
                placeholder="运单号"
              ></el-input>
              <el-input
                v-model="goodsLogistics.logisticsName"
                placeholder="运单公司"
              ></el-input>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="send(2)">确 定</el-button>
              </span>
            </el-dialog>
            <el-button
              @click="opt(scope.row, 3)"
              type="text"
              size="small"
              v-if="scope.row.status == 2"
              >完成</el-button
            >
            <el-button
              @click="opt(scope.row, 3)"
              type="text"
              size="small"
              v-if="scope.row.status == 3"
              >查看结果</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination
          :hide-on-single-page="tableData.total < 10"
          :page-size="10"
          @current-change="changePage"
          :pager-count="11"
          layout="prev, pager, next"
          :total="tableData.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { setToken, getToken, removeToken } from "@/utils/cookie";
// 0：待审核，1：待发货，2：待收货，3：已完成，4：已关闭
export default {
  data() {
    return {
      loading: true,
      dialogVisible: false,
      tableData: {},
      statusOptions: ["待审核", "待发货", "待收货", "已完成", "已关闭", "待提交", "已提交"],
      queryParams: { title: "", phone: "", status: "" },
      showSearch: true,
      dateRange: [],
      current: 1,
      row: {},
      goodsLogistics: {
        logisticsNum: "",
        logisticsName: "",
        orderId: "",
        order: "",
      },
    };
  },
  methods: {
    preSend(row) {
      this.dialogVisible = true;
      this.row = row;
    },
    send(status) {
      console.log(this.row, status);
      this.goodsLogistics.orderId = this.row.orderNum;
      this.goodsLogistics.order = this.row.id;
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer " + getToken();
      this.$http.post(`/order/send`, this.goodsLogistics).then((response) => {
        this.dialogVisible = false;
        this.getOrderList();
        this.goodsLogistics = {
          logisticsNum: "",
          logisticsName: "",
          orderId: "",
          order: "",
        };
      });
    },
    opt(row, status) {
      //row.status = status;
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer " + getToken();
      this.$http
        .post(`/order/update`, {
          goodsOrder: { id: row.id, status: status, orderNum: row.orderNum },
          goodsLogistics: {},
        })
        .then((response) => {
          this.getOrderList();
        });
    },
    changePage(current) {
      this.current = current;
      this.getOrderList();
    },
    handleQuery() {
      this.getOrderList();
    },
    resetQuery() {
      this.queryParams = { title: "", phonenumber: "", status: "" };
      this.dateRange = [];
      this.getOrderList();
    },
    handleDelete() {},
    getOrderList() {
      this.loading = true;
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer " + getToken();
      this.$http
        .post(`/order/getOrderInfoByUserId/${this.current}`, this.queryParams)
        .then((response) => {
          let data = response.data;
          this.tableData = data.data;
          this.loading = false;
        });
    },
  },
  created() {
    this.getOrderList();
  },
};
</script>

<style>
</style>